<template>
  <div
    ref="node"
    :style="nodeContainerStyle"
    :class="nodeContainerClass"
    @dblclick="dblclickNode"
    @click="clickNode"
    @mouseup="changeNodeSite"
    @contextmenu.prevent="nodeRightMenu"
  >
    <!-- 节点类型的图标 -->
    <div class="ef-node-left-ico flow-node-drag">
      <div class="ef-node-move" :title="node.name">
        <svg-icon :icon-class="nodeIcoClass"></svg-icon>
        <div class="ef-node-text" :show-overflow-tooltip="true">
          {{ node.name }}
        </div>
      </div>
    </div>
    <!-- 节点名称 -->
  </div>
</template>

<script>
export default {
  props: {
    node: {
      type: Object,
      default: () => {}
    },
    activeElement: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    nodeContainerClass() {
      return {
        "ef-node-container": true,
        "ef-node-active":
          this.activeElement.nodeType === "node"
            ? this.activeElement.nodeId === this.node.id
            : false
      };
    },
    // 节点容器样式
    nodeContainerStyle() {
      return {
        top: this.node.top,
        left: this.node.left
      };
    },
    // 拖拽的端点class，
    nodePointClass() {
      var nodePointClass = {};
      // 添加该class可以推拽连线出来
      nodePointClass["flow-node-drag"] = true;
      // nodePointClass["flow-node-point"] = true;
      return nodePointClass;
    },
    nodeIcoClass() {
      // var nodeIcoClass = {};
      // nodeIcoClass['ico'] = this.node.ico;
      return this.node.ico;
    }
  },
  methods: {
    // 点击节点
    clickNode() {
      this.$emit("clickNode", this.node);
    },
    // 双击节点
    dblclickNode() {
      this.$emit("dblclickNode", this.node);
    },
    // 右击节点
    nodeRightMenu() {
      this.$emit("nodeRightMenu", this.node);
    },
    // 鼠标移动后抬起
    changeNodeSite() {
      // 避免抖动
      if (
        this.node.left === this.$refs.node.style.left &&
        this.node.top === this.$refs.node.style.top
      ) {
        return;
      }
      this.$emit("changeNodeSite", {
        nodeId: this.node.id,
        left: this.$refs.node.style.left,
        top: this.$refs.node.style.top
      });
    }
  }
};
</script>
